<!DOCTYPE html>
<html>
	<head>
		<title>Familibook >> Register</title>
		<link rel="stylesheet" type="text/css" href="css/site.css" />
		<script type="text/javascript" src="datepicker/datechooser.js"></script>
		<link rel="stylesheet" type="text/css" href="datepicker/datechooser.css" />
		<link rel="stylesheet" href="css/galleriffic.css"/>
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-1.3.2.js"></script>
		<script src="js/jquery.opacityrollover.js"></script>
		<script src="js/jquery.galleriffic.js"></script>
		<script src="js/gallery-settings.js"></script>
		<!--[if IE 6]>
			<script src="js/ie6-transparency.js"></script>
			<script>
				DD_belatedPNG.fix('#header .logo img, .subtitle img, .slideshow-container, .navigation-container #thumbs .thumbs li .thumb img, .navigation a.next, .footer-line, #sidebar .author-photo, .line, .commentlist .comment-reply-link, #contact-page #contact .submit');
			</script>
			<link rel="stylesheet" type="text/css" href="styles/ie6.css" />
		<![endif]-->
		<!--[if IE 7]>
			<link rel="stylesheet" type="text/css" href="styles/ie7.css" />
		<![endif]-->
		<!--[if IE 8]>
			<link rel="stylesheet" type="text/css" href="styles/ie8.css" />
		<![endif]-->
		<script type="text/javascript">
			function init(){
				windowLoad();
				{% ifequal type 'new' %}
					nowYear();
				{% endifequal %}
			}
			function windowLoad(){
				var datechooser = document.getElementById('datechooser_img');
				datechooser.DateChooser = new DateChooser();

				if (!datechooser.DateChooser.display)
				{
					alert('Error in setting up the datechooser!');
					alert('Do not worry, you can manually enter the feilds');
					return false;
				}

				datechooser.DateChooser.setCloseTime(200);
				datechooser.DateChooser.setXOffset(10);
				datechooser.DateChooser.setYOffset(-10);
				datechooser.DateChooser.setUpdateField('hiddendate', 'j');
				datechooser.DateChooser.setUpdateField('hiddenmonth', 'm');
				datechooser.DateChooser.setUpdateField('year', 'Y');
				document.getElementById('datechooser_img').onclick = datechooser.DateChooser.display;
			}
			
			function GetValueFromHiddenPutitIntoActualInput() {
				var dateval = hiddendate.value;
				var monthval = hiddenmonth.value;
				date.selectedIndex = dateval - 1;
				month.selectedIndex = monthval - 1;
			}
			
			function monthday(m, y) {
				var monday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
				var num = monday[m];
				var yearmod = y % 4;
				if(yearmod == 0)
					if(m == 2)
						return 29;
				
				return num;
			}			
			
			function nowYear(){
				var date = new Date();
				var y = date.getFullYear();
				year.value = y;
			}
			
			function setdays(dm){
				var date = document.getElementById('date');
				var month = document.getElementById('month');
				var year = document.getElementById('year');
			
				var monthdays = monthday(month.selectedIndex, year.value);
				var selectdays = date.length;
				var curdy = date.options[date.selectedIndex].value;
				
				if (curdy.length == 1) {
					curdy = "0" + curdy;
				}
				
				var curmn = month.options[month.selectedIndex].value;
				
				if (curmn.length==1) {
					curmn = "0" + curmn;
				}
				
				var curyr = year.value;
				
				if (selectdays > monthdays) {
					for (var dlp = selectdays; dlp > monthdays; dlp--) {
						date.options[dlp-1] = null;
					}
				}
				else if (monthdays > selectdays) {
					for (var dlp = selectdays; dlp < monthdays; dlp++) {
						date.options[dlp] = new Option(dlp + 1, dlp + 1);
					}
				}       
				
				if (curdy > monthdays) {
					date.options[monthdays-1].selected = true;
					curdy = monthdays;
				}
			}
		</script>
	</head>
	<body onload="init();">
		<div id="wrap"> 
			<div id="header"> 
				<div class="logo">                	                                        
					<a href="/"><img src="pics/logo.png" alt="logo" /></a>                 
				</div>
				<div id="nav">
					<ul id="nav-pages">                 	     	
						<li>
							<a href="/">
								Home
							</a>
							<span>
								~
							</span>
						</li>
						<li>
							<a href="/sign?type=new" class="current">
								Register
							</a>
						</li>
            		</ul>
				</div>          
            </div>
			<div id="register-content">
				<div id="container2" align="left" style="text-align: left;">
					{% ifequal type 'edit' %}
						<form method="post" action="/edit">
							<input type="hidden" value="{{ user.usi }}" name="usi" />
							First Name: <input type="text" name="firstname" value="{{ user.firstname }}" />
								<br />
							Last Name: <input type="text" name="lastname" value="{{ user.lastname }}" />
					{% else %}
						<form method="post" action="/ChoosePlacement">
							First Name: <input type="text" name="firstname" value="First Name" onfocus="if(this.value=='First Name'){this.value=''};" onblur="if(this.value==''){this.value='First Name'};" />
								<br />
							Last Name: <input type="text" name="lastname" value="Last Name" onfocus="if(this.value=='Last Name'){this.value=''};" onblur="if(this.value==''){this.value='Last Name'};" />
					{% endifequal %}
						<br />
					Date of birth:
						&nbsp;
						&nbsp;
					<input type="hidden" style="display: none" name="hiddendate" id="hiddendate" value="{{ dobdate }}" />
					<select name="date" id="date">
						{% for i in dates %}
							{% ifequal i dobdate %}
								<option selected="selected" value="{{ i }}">{{ i }}</option>
							{% else %}
								<option value="{{ i }}">{{ i }}</option>
							{% endifequal %}
						{% endfor %}
					</select>
						&nbsp;
						&nbsp;
					<input type="text" style="display: none" name="hiddenmonth" id="hiddenmonth" value="{{ dobmonth }}" />
					<select name="month" onchange="setdays(1);" id="month">
						{% for month in months %}
							{% ifequal month.i dobmonth %}
								<option value="{{ month.i }}" selected="selected">{{ month.m }}</option>
							{% else %}
								<option value="{{ month.i }}">{{ month.m }}</option>
							{% endifequal %}
						{% endfor %}
					</select>
						&nbsp;
						&nbsp;
					<input type="text" name="year" value="{{ dobyear }}" onchange="setdays(1);" style="width: 50px;" id="year" />
						&nbsp;
						&nbsp;
					<img src="datepicker/datechooser.png" align="middle" id="datechooser_img" />
						<br />
					Sex: 
					<select name="sex">
						{% ifequal type 'edit' %}
							{% ifequal user.sex 'Male' %}
								<option selected="selected" value="Male">Male</option>
								<option value="Female">Female</option>
							{% endifequal %}
							{% ifequal user.sex 'Female' %}
								<option value="Male">Male</option>
								<option selected="selected" value="Female">Female</option>
							{% endifequal %}
						{% else %}
						<option value="Male">Male</option>
						<option value="Female">Female</option>
						{% endifequal %}
					</select>
						<br />
					Father:
					<select name="fatherusi">
						<option value="">Select</option>
						{% ifequal type 'edit' %}
							{% for male in males %}
								{% ifequal user.fatherusi male.usi %}
									<option selected="selected" value="{{ male.usi }}">{{ male.firstname }} {{ male.lastname }}</option>
								{% else %}
									<option value="{{ male.usi }}">{{ male.firstname }} {{ male.lastname }}</option>
								{% endifequal %}
							{% endfor %}
						{% else %}
							{% for male in males %}
								<option value="{{ male.usi }}">{{ male.firstname }} {{ male.lastname }}</option>
							{% endfor %}
						{% endifequal %}
					</select>
						<br />
					Mother:
					<select name="motherusi">
						<option value="">Select</option>
						{% ifequal type 'edit' %}
							{% for female in females %}
								{% ifequal user.motherusi female.usi %}
									<option selected="selected" value="{{ female.usi }}">{{ female.firstname }} {{ female.lastname }}</option>
								{% else %}
									<option value="{{ female.usi }}">{{ female.firstname }} {{ female.lastname }}</option>
								{% endifequal %}
							{% endfor %}
						{% else %}
							{% for female in females %}
								<option value="{{ female.usi }}">{{ female.firstname }} {{ female.lastname }}</option>
							{% endfor %}
						{% endifequal %}
					</select>
						<br />
					Spouse:
					<select name="spouseusi">
						<option value="">Select</option>
						{% ifequal type 'edit' %}
							{% for spouse in spouses %}
								{% ifequal user.spouseusi spouse.usi %}
									<option selected="selected" value="{{ spouse.usi }}">{{ spouse.firstname }} {{ spouse.lastname }}</option>
								{% else %}
									<option value="{{ spouse.usi }}">{{ spouse.firstname }} {{ spouse.lastname }}</option>
								{% endifequal %}
							{% endfor %}
						{% else %}
							{% for spouse in spouses %}
								<option value="{{ spouse.usi }}">{{ spouse.firstname }} {{ spouse.lastname }}</option>
							{% endfor %}
						{% endifequal %}
					</select>
						<br />
					<input type="submit" value="Submit">
				</form>
			</div>
			<div id="footer"> 
				<div class="footer-line">Copyright &copy; 2011 &middot; PikuSoft &middot; All Rights Reserved</div>
			</div>
		</div>
	</body>
</html>